<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script>
        function checkName(){
            // var obj = {
            //     name:$("userName").value
            // }
            //
            // //向服务发送get请求，第一个参数为访问服务器的URL地址
            // //第二个参数为表单数据
            // axios.get("/test/checkName",{params:obj}
            // ).then(e => pressName(e.data));//e.data表示得到响应信息的消息体

            let paramObj = new URLSearchParams();
            paramObj.append("name",$("userName").value);

            axios.post("/test/checkName",paramObj)
            .then(e => {
                pressName(e.data);
            });
        }

        function pressName(info){
            if(info == "yes"){
                $("infoDiv").innerHTML = "可以使用";
                $("infoDiv").style.color = "green";
            }
            else{
                $("infoDiv").innerHTML = "该用户已存在";
                $("infoDiv").style.color = "red";
            }
        }

        function $(id){
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <form action="/add">
        用户名：<input type="text" id="userName" name="userName" onblur="checkName()">
        <div id="infoDiv"></div>
        生日：<input type="text" id="birthday" name="birthday"><br>
        <input type="submit" value="添加">
    </form>
</body>
</html>